<template>
    <div class="oh box">
        <header class="tc w100">
            <div class="title pr pr20 pl20">
                <img @click="goStoreDetails()" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn">立即预约</h1>
            </div>
        </header>
        <main>
            <div class="content">
               <div class="way p30 ">
                <p class="f30">维修方式</p>
                    <van-radio-group v-model="radio" direction="horizontal" class="f25">
                      <van-radio class="pr30" name="1" icon-size="24rem">到店维修</van-radio>
                      <van-radio name="2" icon-size="24rem">上门取车</van-radio>
                    </van-radio-group>
               </div>
            </div>
            <div class="info mt20">
                <van-form validate-first @failed="onFailed">
               <div class="infoCon p30 ">
                    <p class="f30 pb20">客户信息</p>
                    <van-cell-group class="mt20" >
                        <van-field  v-model="listTable.principal" required :rules="[{required: true}]" clickable label="车主姓名" placeholder="请输入用户名" />
                    </van-cell-group>
                    <van-cell-group class="mt20">
                        <van-field v-model="listTable.tel" required clickable label="联系方式" placeholder="请输入联系方式" />
                    </van-cell-group>
                    <van-field class="mt20" label="预约时间" readonly clickable
                        name="picker" :value="item.manufactureDate | formatter"
                        placeholder="请选择时间" @click="() => { showPicker1 = true;}"
                        :rules="[{ message: '请选择出厂日期' }]"/>
                    <van-popup v-model="showPicker1" position="bottom">
                        <van-datetime-picker  type="month-day"
                            @confirm="onConfirmManufactureDate"
                            v-model="currentDate"
                            @change="changeFn()"
                            @cancel="cancelFn()"
                            :minDate="minDate" :maxDate="maxDate"/>
                    </van-popup>
                    <van-cell-group v-show="radio==2" class="mt20">
                        <van-field  clickable label="取车位置" placeholder="请输入取车位置" />
                    </van-cell-group>
               </div>
               <div class="infoCon p30 mt20">
                    <p class="f30 pb20">车辆信息</p>
                    <van-field class="mt20" readonly clickable 
                        label="车辆类型"  :value="value" placeholder="请选择"
                        @click="showPicker = true"/>
                    <van-popup v-model="showPicker" round position="bottom">
                        <van-picker show-toolbar :columns="columns"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"/>
                    </van-popup>
                    <van-cell-group class="mt20">
                        <van-field v-model="carCard" clickable label="车牌号" placeholder="请输入车牌号" />
                    </van-cell-group>
               </div>
               <div class="infoCon p30 mt20 mb20">
                    <p class="f30 pb20 mb30">照片</p>
                    <van-row class="mb20">
                        <van-col span="7">
                            <p class="f20">整车照片</p>
                        </van-col>
                        <van-col span="17">
                            <van-uploader :after-read="afterRead1" :max-count="1" v-model="form.fileList1">
                            <!-- <Uploader :after-read="afterRead1" /> -->
                            <div class="upload tc pt30 bsb">
                                <van-icon name="plus" class="plus mb10" />
                                <p style="margin-top: 20rem;" class="f20">上传图片</p>
                            </div>
                            </van-uploader>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="7">
                            <p class="f20">维修部位照片</p>
                        </van-col>
                        <van-col span="17">
                            <van-uploader :after-read="afterRead2" :max-count="3" v-model="form.fileList2">
                            <div class="upload tc pt30 bsb">
                                <van-icon name="plus" class="plus mb10" />
                                <p style="margin-top: 20rem;" class="f20">上传图片</p>
                            </div>
                            </van-uploader>
                        </van-col>
                    </van-row>
                </div>
                <van-button @click="subEvent" class="btn w100 mt50 f25" type="info">提交</van-button>
            </van-form>
            </div>
        </main>
    </div>
</template>
<script>
// import { search } from '../../../api/Repair';
export default{
    data() {
        return {
            listTable:{},
            username:'',
            phone:'',
            carCard:'',
            radio:'1',

            showPicker:false,  //选择车辆
            
            showPicker1: false,  //选择时间
            item:{
                manufactureDate: '', 
            },
            minDate: new Date(1970, 0, 1),    //定义一个最小时间
            maxDate: new Date(2088, 10, 1),   
		    currentDate: new Date(),//时间日期初始化
            changeDate: new Date(),//时间日期初始化
            value: '',
            columns: ['宝马', '路虎', '大众', '奔驰', '别克', '比亚迪'],
            form:{
                fileList1:[],
                fileList2:[]
            }
        }
    },
    mounted(){
        this.listTable = this.$route.query.el;
    },
    //时间过滤
	 filters: {
     formatter(date) {
        if(date == "" || date == null) {
            return;
        }else{
            date = new Date(date);
            return `${date.getMonth() + 1}月${date.getDate()}日`;//精确到具体时间的在后面继续拼加
            }
        }
    },
    methods: {
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
        changeFn() { // 值变化时触发
        this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
        },
        cancelFn(){
            this.showPicker1 = false;//弹框取消事件
        },
        //点击输入框确认选择时间
        onConfirmManufactureDate(date) {
            this.item.manufactureDate = date;
            this.showPicker1 = false;
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        afterRead1(file) {
            console.log(file);
        },
        afterRead2(file) {
            console.log(file);
        },
        // 点击提交
        subEvent(){
            this.$router.push({
                path:'/reservationOk',query:{el:this.listTable}
            })
        },
        goStoreDetails(){
            this.$router.push({
                path:'/storeDetails',query:{el:this.listTable}
            })
        }
    }
}
</script>
<style scoped>
.box main .content,.info{padding: 0 20rem;}
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
.content{margin-top: -310rem;}
main .content .way{display: flex;justify-content: space-between;background-color: #fff;border-radius: 20rem;}
main .info .infoCon{background-color: #fff;border-radius: 20rem;}
main .info .infoCon p{border-bottom: 1rem solid #f8f8f8;}
>>> main .info .infoCon .van-field__label{background-color: #4fa4ff;border-radius: 50rem;color: #fff;text-align: center;width: 140rem;margin-left: -10rem;height: 65rem;line-height: 65rem;font-size: 25rem;}
>>> main .info .infoCon .van-cell__value{font-size: 25rem;border-radius: 40rem;height: 65rem;line-height: 65rem;border: 1rem solid #e7e7e7;}
>>> main .info .infoCon .van-field__control{margin-left: 30rem;width: 430rem;}
>>> main .info .infoCon .van-overlay{background-color: rgba(0,0,0,.2);}
>>> [class*=van-hairline]::after,[class*=van-hairline]::before{content: none;}
>>> .van-cell::after{content: none;}
>>> .van-picker-column,.van-picker__confirm{font-size: 25rem;}
main .content,.info .way{font-weight: 700;}
.upload {width: 180rem;height: 150rem;border: 1rem solid #dddddd;border-radius: 20rem;}
.upload .plus {font-size: 30rem;} 
>>> main .van-button{border-radius: 50rem;width: 520rem !important;background-color: #0663e7;height: 70rem;left: 50%;top: 50%;;transform: translate(-50%,-50%);} 



/* .anima{
    animation: move linear 2s;
}
@keyframes move {
    50%{transform: translateY(10rem);}

} */
</style>